// *********************** UL View ***********************
function PadlockView(jqElement) {
	this.jqElement = jqElement;
}

PadlockView.prototype.init = function(controller) {
	this.controller = controller;

	var self = this;
	this.getSlots().each(function(index, slot) {
		$(slot).click(function() {
			self.controller.onMove(index);
		});
	});

	this.getResetButton().click(function() {
		self.controller.onReset();
	});
};

PadlockView.prototype.refresh = function(data) {
	this.getSlots().each(function(index, element) {
		var jqElement = $(element);
		jqElement.removeClass('playerA').removeClass('playerB').removeClass('playerNone');
		jqElement.find('.slot_content').html('');

		var playerClass = 'playerNone';
		var content = '';
		if (data[index] < 0) {
			playerClass = 'playerB';
			content = '&uarr;';
		} else if (data[index] > 0) {
			playerClass = 'playerA';
			content = '&darr;';
		}

		jqElement.addClass(playerClass);
		jqElement.find('.slot_content').html(content);
	});
};

PadlockView.prototype.onSolved = function() {
	$('.padlockContainer').addClass("won");
	this.getSlots().unbind();
	this.getResetButton().unbind();

	setTimeout(function() {
		alert("Solved!");
	}, 500);
};

PadlockView.prototype.reset = function() {
	$('.padlockContainer').removeClass("won");
};

PadlockView.prototype.getSlots = function() {
	return this.jqElement.children('li');
};

PadlockView.prototype.getResetButton = function() {
	return $('#resetButton');
};